<template>
	<view class="">
		<view class="pull-down">
			<view class="down-box">
				<view class="down-one">
					<view v-if="!isright" class="down-item down-right" @click="toggleDropdown(1)">
						<text :class="{ 'box-color': iscolor===1 }">{{synthesis}}</text>
						<view :class="['rotate-box rotating', { rotatings: iscolor===1 && rotating }]">
							<view class="uicon" :class="{ 'uicolor': iscolor === 1 }"></view>
						</view>
					</view>
					<view v-if="!isTrue" class="down-item" @click="toggleDropdown(3)">
						<text :class="{ 'box-color': iscolor===3 }">{{officetit}}</text>
						<view :class="['rotate-box rotating', { rotatings: iscolor===3 && rotating  }]">
							<view class="uicon" :class="{ 'uicolor': iscolor === 3 }"></view>
						</view>
					</view>
				</view>

				<view class="down-item" v-if="!isright && isproduct" @click="toggleDropdown(4)">
					<text :class="{ 'box-color': iscolor===4 }">{{screen}}</text>
					<view :class="['rotate-box rotating', { rotatings: iscolor===4 && rotating  }]">
						<view class="uicon" :class="{ 'uicolor': iscolor === 4 }"></view>
					</view>
				</view>
				<view class="sort-container" v-if="isright" @click="toggleDropdown(5)">
					<view class="sort-button">

						<text :class="{ 'box-color': iscolor===5 }">价格</text>
						<!-- {{
						sortOrder === 'desc'?"从低到高":sortOrder === 'asc'? '从高到低':"价格排序"
						}} -->
						<view v-if="sortOrder === 'asc'" class="uicon" :class="{ 'uicolor': sortOrder === 'asc' }">
						</view>
						<view v-if="sortOrder === 'desc'" class="uiconbot"
							:class="{ 'uicolorbot': sortOrder === 'desc' }"></view>
						<view class="san-box">
							<view v-if="sortOrder === ''" class="uicon"></view>
							<view v-if="sortOrder === ''" class="uiconbot"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="dropdown-box" :class="{'open': isVisible, 'dropdown-box-true': isTrue,'isheigth':isheigth}"
				:style="{ height: isVisible ? getHeight(length) + 'rpx' : '0rpx' }">
				<!-- 综合排序和服务类型-->
				<view class="box-top" v-if="iscolor===1">
					<view v-for="(item,index) in localSort" :key="index" @click="select(item,index)">
						<view class="item">
							<text :class="{'lable': index===isSelect}">{{item.label}}</text>
							<u-icon v-if="index ==isSelect" size="32" color="#CCA566" name="checkmark"></u-icon>
						</view>
					</view>
				</view>


				<view class="screen-box" v-if="iscolor===3">
					<!-- <view class="type-title">
						科室选择
					</view> -->
					<view class="type-boxs">
						<view v-for="(item, index) in officeList" :key="index" class="type-item"
							:class="{'selected': selectedoffice === index}" @click="selectedoffices(item,index)">
							{{ item.title }}
						</view>
					</view>

				</view>






				<view class="screen-box" v-if="iscolor===4">
					<view class="type-title">
						医生职称
					</view>
					<view class="type-boxs">
						<view v-for="(item, index) in levelList" :key="index" class="type-item"
							:class="{'selected': selectedLevel === item.dictValue}" @click="selectedLevels(item,index)">
							{{ item.dictLabel }}
						</view>
					</view>
					<view class="type-btns">
						<view class="type-btn" @click="reset">
							重置
						</view>
						<view class="type-btn btn-color" @click="verify">
							确定
						</view>
					</view>
				</view>
			</view>
			<view class="dropdowns"
				:class="{ 'dropdown-visible': isVisible,'dropdown-true': isTrue,'isheigth':isheigth }" @click="kong">
			</view>



		</view>
	</view>

</template>

<script>
	export default {
		props: {
			screens: {
				type: Array,
				default: () => [],
			},
			levelList: {
				type: Array,
				default: () => [],
			},
			sort: {
				type: Array,
				default: () => [],
			},
			office: {
				type: Array,
				default: () => [],
			},
			isheigth: {
				type: Boolean,
				default: false,
			},
			isTrue: {
				type: Boolean,
				default: false, // 默认值为 false
			},
			isproduct: {
				type: Boolean,
				default: true, // 默认值为 false
			},
			isright: {
				type: Boolean,
				default: false, // 默认值为 false
			},
		},
		watch: {
			levelList(newVal, oldVal) {
				console.log('screen prop changed:', newVal);
			},



			screens(newVal, oldVal) {
				console.log('screen prop changed:', newVal);
			},
			// 监听 sort 数组的变化
			sort(newVal, oldVal) {
				this.localSort = newVal
			},
			// 监听 sort 数组的变化
			office(newVal, oldVal) {
				console.log(newVal, "zheli shi ")
				this.officeList = newVal
			},

		},

		data() {
			return {
				sortOrder: '', // 默认无排序

				localSort: this.sort,
				officeList: this.office,
				iscolor: 1,
				rotating: false,
				isVisible: false,
				screen: '筛选',
				synthesis: '综合排序',
				officetit: "全部科室",
				isSelect: 0,
				selectedLevel: 0,
				selectedoffice: 0,



			}
		},
		methods: {

			verify() {
				this.$emit("inquire", this.selectedLevel);
				this.toggleDropdown(4)

			},
			reset() {
				this.selectedLevel = "";
				this.$emit('reset', "");
				this.toggleDropdown(4)
			},
			//选择职称
			selectedLevels(item, index) {
				this.selectedLevel = item.dictValue;

			},
			//
			selectedoffices(item, index) {
				this.selectedoffice = index;
				this.officetit = item.title;

				this.rotating = false;
				this.isVisible = false;
				this.$emit("offices", item)
			},
			select(item, index) {

				this.screen = '筛选'
				this.zIndex = false;
				this.isVisible = false;
				this.isSelect = index;
				if (this.iscolor === 1) {
					this.synthesis = item.label;
					this.serviceType = "医生类型";
					// this.getDoctorList();
				} else {
					this.synthesis = '综合排序'
					this.serviceType = item.label;
					this.type = item.type;
					this.getList();
				}
				this.rotating = false;
				this.$emit("select", item)
			},
			//关闭
			kong() {
				this.rotating = false;
				this.isVisible = false;
			},


			getHeight(item) {
				// 使用 Vue 的 $refs 或直接使用 DOM 获取元素的高度
				return item ? item * 75 : 0; // 通过 scrollHeight 获取实际内容的高度
			},
			toggleSortOrder() {
				// 切换排序状态，按顺序依次为升序、降序、无排序
				if (this.sortOrder === '') {
					this.sortOrder = 'asc';
				} else if (this.sortOrder === 'asc') {
					this.sortOrder = 'desc';
				} else {
					this.sortOrder = '';
				}
				// 根据 sortOrder 值对商品进行排序
				this.$emit("sortProducts", this.sortOrder)

			},
			toggleDropdown(index) {

				this.zIndex = true;

				if (index == this.iscolor) {
					if (index != 5) {
						this.rotating = !this.rotating;
						this.isVisible = !this.isVisible;
						this.sortOrder = ''
					}

					switch (index) {
						case 1:
							this.length = 3.5;
							break;
						case 3:
							this.length = this.officeList.length / 3 + 2;

							break;
						case 5:
							this.toggleSortOrder();

							break;
						default:

							this.length = 5;
							break;
					}
					return
				}
				if (index != 5) {
					this.rotating = true;
					this.isVisible = true;
					this.sortOrder = ''
				}

				this.iscolor = index;
				switch (index) {
					case 1:
						this.length = 3.5;

						break;
					case 3:
						this.length = this.officeList.length / 3 + 2;
						break;
					case 5:
						this.toggleSortOrder();

						break;
					default:

						this.length = 5;


						break;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pull-down {
		margin-top: -25rpx;
		font-size: 28rpx;
		color: #1A1A1A;
		margin: 0rpx 0rpx;

		.down-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding: 0 24rpx;
			// margin-bottom: 20rpx;

			.down-item {
				display: flex;
				align-items: center;
				font-weight: 500;
			}

			.box-color {
				color: #CCA566;
			}
		}
	}


	.dropdowns {
		height: calc(100vh - 310rpx);
		width: 100%;
		background: rgba(0, 0, 0, 0.50);
		position: fixed;
		z-index: -1;
		top: 415rpx;
		transition: transform 0.3s ease, opacity 0.3s ease;
		opacity: 0;
		left: 0;
	}

	.dropdowns-true {

		top: 354rpx;

	}



	.rotate-box {
		width: 20rpx;
		height: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 6rpx;
		// background-color: #e74c3c;
		transition: transform 0.3s ease-out;
	}

	.uicon {
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-bottom: 15rpx solid #808080;

	}

	.uicolor {
		border-bottom: 15rpx solid #CCA566;
	}

	.rotating {
		transform: rotate(180deg);
	}

	.rotatings {
		transform: rotate(0);
	}

	.dropdown-box {
		left: 0;
		width: 100%;
		background: #fff;
		top: 415rpx;
		position: fixed;
		z-index: -1;
		height: 0;
		/* 初始高度为0 */
		transition: height 0.3s ease, padding 0.3s ease;

		/* 过渡效果 */
		.box-top {
			margin-top: 20rpx;
		}
	}

	.dropdown-box-true {
		top: 354rpx;
	}

	.isheigth {
		top: 440rpx;
	}

	.dropdown-box {
		width: 100%;
		background: #fff;

		height: 0;
		/* 初始高度为0 */
		transition: height 0.3s ease, padding 0.3s ease;
		/* 过渡效果 */
	}

	/* 选中的菜单项，展开后改变样式 */
	.dropdown-box.open {

		z-index: 12;
		// padding: 10rpx;
		/* 展开时增加内边距 */
	}

	.dropdown-items:hover {
		background: #f1f1f1;
		/* 添加鼠标悬停效果 */
	}

	/* 菜单显现时的动画效果 */
	.dropdown-visible {
		z-index: 11;
		opacity: 1;
		/* 菜单完全不透明 */
	}

	/* 菜单项样式 */
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 70rpx;
		padding: 0 24rpx;

		.lable {
			color: #CCA566;
		}
	}

	.screen-box {
		padding: 24rpx;

		.type-boxs {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			margin-top: 16rpx;
			font-size: 24rpx;
			column-gap: 20rpx;

			.type-item {
				height: 50rpx;
				line-height: 50rpx;
				// width: 205rpx;
				font-size: 24rpx;
				color: #4D4D4D;
				text-align: center;
				margin-bottom: 24rpx;

				border-radius: 8rpx;
				border: 1rpx solid #E6E6E6;

			}

			.selected {
				color: #CCA566;
				border: 1rpx solid #CCA566;
			}
		}

		.type-title {}

		.type-btns {
			display: flex;
			justify-content: space-between;
			padding-top: 24rpx;
			border-top: 1rpx solid #e6e6e6;

			.type-btn {
				width: 339rpx;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1rpx solid #E6E6E6;
			}

			.btn-color {
				background: #CCA566;
				color: #fff;
				border: 1rpx solid #CCA566;
			}
		}


	}

	.down-one {
		display: flex;
		align-items: center;

		.down-right {
			margin-right: 24rpx;
		}
	}

	.sort-container {
		display: flex;
		font-size: 28rpx;
		color: #808080;

		.sort-button {
			display: flex;
			align-items: center;
		}

	}





	.uicon {

		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-bottom: 15rpx solid #808080;

	}

	.uiconbot {
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 15rpx solid #808080;

	}

	.uicolor {
		margin-left: 5rpx;
		border-bottom: 15rpx solid #CCA566;
	}

	.uicolorbot {
		margin-left: 5rpx;
		border-top: 15rpx solid #CCA566;
	}

	.sorted-asc {
		color: #CCA566;
	}

	.san-box {
		margin-left: 5rpx;

		view:last-child {
			margin-top: 5rpx;

		}

		.uicon {

			width: 0;
			height: 0;
			border-left: 8rpx solid transparent;
			border-right: 8rpx solid transparent;
			border-bottom: 12rpx solid #808080;

		}

		.uiconbot {
			width: 0;
			height: 0;
			border-left: 8rpx solid transparent;
			border-right: 8rpx solid transparent;
			border-top: 12rpx solid #808080;

		}
	}
</style>